<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面向对象Tab栏</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <main>
        <h4>Js 面向对象 动态添加标签页</h4>
        <div class="tabBox" id="tab">
            <nav>
                <ul>
                    <li  class="liActive">1<span class="iconfont icon-guanbi"></span></li>
                    <li>2<span class="iconfont icon-guanbi"></span></li>
                    <li>3<span class="iconfont icon-guanbi"></span></li>
                </ul>
                <div class="tabAdd">
                    <span>+</span>
                </div>
            </nav>
            <div class="tabContent">
                <section class="sectionActive">1</section>
                <section>2</section>
                <section>3</section>
            </div>
        </div>
    </main>
    <script src='js/index.js'></script>
</body>
</html>